<template>
  <div>
    <p class="class-top">商品列表</p>
    <el-table :data="productList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form inline label-position="left" class="demo-table-expand">
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="所属分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="商品图片">
              <img
                :src="props.row.imgUrl"
                alt=""
                style="width: 80px; height: 80px"
              />
              <span>{{ props.row.img }}</span>
            </el-form-item>
            <el-form-item label="商品评价">
              <span>{{ props.row.rating }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.goodsDesc }}</span>
            </el-form-item>
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="商品价格">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.ctime }}</span>
            </el-form-item>
            <el-form-item label="商品销量">
              <span>{{ props.row.sellCount }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="商品名称" prop="name"> </el-table-column>
      <el-table-column label="所属分类" prop="category"></el-table-column>
      <el-table-column label="商品价格">
        <template slot-scope="scope" >￥{{ scope.row.price.toFixed(2) }}</template>
      </el-table-column>
      <el-table-column label="商品图片" prop="imgUrl">
        <template slot-scope="scope">
          <img style="width: 60px; height: 60px" :src="scope.row.imgUrl"/>
        </template>
      </el-table-column>
      <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)"
            >删除</el-button>
        </template>
      </el-table-column> 
    </el-table>
    <el-pagination
      :page-sizes="[5, 7, 9, 12]"
      @size-change="handleSizeChange"
      @current-change="pagechange"
      :current-page="ctpage"
      :page-size="pagesize"
      layout="total, sizes,prev, pager, next"
      :total="total"
      style="margin-top: 20px"
    >
    </el-pagination>
    <!-- 打开编辑显示的模态框 -->
    <el-dialog title="修改商品" :visible.sync="dialogFormVisible" center>
      <el-form :model="form">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" :label-width="formLabelWidth">
          <el-select v-model="form.category" placeholder="请选择">
            <el-option
              v-for="item in categories"
              :key="item.cateName"
              :label="item.cateName"
              :value="item.cateName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" :label-width="formLabelWidth">
          <el-upload
            action="http://127.0.0.1:5000/goods/goods_img_upload"
            style="width: 160px; height: 160px"
            :show-file-list="false"
            :on-success="uploadImg"
          >
            <img
              :src="form.imgUrl"
              alt=""
              style="width: 160px; height: 160px"
            />
          </el-upload>
        </el-form-item>
        <el-form-item label="商品描述" :label-width="formLabelWidth">
          <el-input v-model="form.goodsDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, delGoods, editGoods, getCategories } from "@/apis/goods";
import { getYYYYMMDDhhmmss } from "@/utils/utile"; //暴露处理时间的工具函数

export default {
  data() {
    return {
      formLabelWidth: "120px", //模态框宽度
      dialogFormVisible: false, //模态框是否课件
      productList: [],
      imgUrl: "", //新图片路径
      total: 0, //总条数
      pagesize: 5, //每次显示的页数
      ctpage: 1, //当前页数
      form: {}, //当前用户回填的信息
      categories: [], //数组用来保存所有分类的名称
    };
  },
  created() {
    this.reqData();
  },
  methods: {
    reqData() {
      if (this.flag) {
        this.$message({
          message: "请勿频繁操作",
          type: "warning",
        });
        return;
      }
      this.flag = true;
      setTimeout(() => {
        this.flag = false;
      }, 1000);
      getList({ currentPage: this.ctpage, pageSize: this.pagesize }).then(
        (res) => {
          this.total = res.data.total;
          this.productList = res.data.data;
          // console.log(res.data);
          for (let i = 0; i < res.data.data.length; i++) {
            res.data.data[i].ctime = getYYYYMMDDhhmmss(res.data.data[i].ctime);
          }
        }
      );
    },
    pagechange(page) {
      this.ctpage = page; //改变当前页数
      this.reqData();
    },
    //选择一页多少个
    handleSizeChange(row) {
      this.pagesize = row;
      this.reqData();
      // console.log(row);
    },
    //删除数据
    handleDelete(row) {
      // console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delGoods({ id: row.id }).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
            this.reqData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //点击编辑数据
    handleEdit(row) {
      this.dialogFormVisible = true;
      // console.log(row);
      //把点击的数据保存
      this.form = JSON.parse(JSON.stringify(row));
      //获取商品分类
      getCategories().then((res) => {
        // console.log(res);
        this.categories = res.data.categories;
      });
    },
    //图片上传成功
    uploadImg(res) {
      // console.log(res);
      this.imgUrl = res.imgUrl;
      //修改当前编辑的图片的地址
      let oldImg = this.form.imgUrl;
      let serverIp = oldImg.substring(0, oldImg.lastIndexOf("/") + 1);
      this.form.imgUrl = serverIp + res.imgUrl;
      // console.log(this.imgUrl);
    },
    //确认修改
    sureEdit() {
      let { name, category, price, goodsDesc, id } = this.form;
      this.imgUrl = this.form.imgUrl.substring(
        this.form.imgUrl.lastIndexOf("/") + 1
      );
      editGoods({
        name,
        category,
        price,
        goodsDesc,
        id,
        imgUrl: this.imgUrl,
      }).then((res) => {
        // console.log(res);
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          this.dialogFormVisible = false;
          this.reqData();
        }
      });
    },
  },
};
</script>

<style lang="less">
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>